<template>
  <div class="dashboard-container">

    <!-- 指标卡片区域 -->
    <el-row :gutter="20" class="metric-row">
      <el-col :xs="24" :sm="12" :md="6" v-for="(metric, index) in metrics" :key="index">
        <el-card shadow="hover" class="metric-card" @click="handleMetricClick(metric.action)">
          <div class="metric-content">
            <div class="metric-icon" :style="{ backgroundColor: metric.bgColor }">
              <el-icon :size="24">
                <component :is="metric.icon"/>
              </el-icon>
            </div>
            <div class="metric-info">
              <div class="metric-value">{{ metric.value }}</div>
              <div class="metric-title">{{ metric.title }}</div>
              <div class="metric-change" :class="metric.changeType">
                <el-icon :size="14">
                  <CaretTop v-if="metric.changeType === 'up'"/>
                  <CaretBottom v-else/>
                </el-icon>
                {{ metric.change }} 较昨日
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>



  </div>
</template>

<script setup lang="ts">
import {ref, onMounted, markRaw, computed} from 'vue'
import {useRouter} from "vue-router";
import {getDashboardMetrics} from '@/api/dashboard.ts'
import type {DashboardMetrics} from '@/api/dashboard.ts'
import {
  Document as DocumentIcon,

  User as UserIcon,

  CaretTop as CaretTopIcon,
  CaretBottom as CaretBottomIcon,
  Check as CheckIcon,

  SwitchFilled as SwitchFilledIcon,
  Flag as FlagIcon,
  Star as StarIcon
} from '@element-plus/icons-vue'

// 路由
const router = useRouter()

// 使用 markRaw 标记不需要响应式的组件
const Star = markRaw(StarIcon)
const Flag = markRaw(FlagIcon)
const SwitchFilled = markRaw(SwitchFilledIcon)
const Document = markRaw(DocumentIcon)
const User = markRaw(UserIcon)
const CaretTop = markRaw(CaretTopIcon)
const CaretBottom = markRaw(CaretBottomIcon)


// 指标数据
const metrics_data = ref<DashboardMetrics | null>(null)

// 初始化
const init = async () => {
  try {
    metrics_data.value = await getDashboardMetrics()

  } catch (error) {
    console.error('获取仪表盘数据失败:', error)
  }
}

onMounted(() => {
  init()
})

// 指标数据 - 改为计算属性
const metrics = computed(() => {
  if (!metrics_data.value) {
    // 返回默认值或空数组，直到数据加载完成
    return [
      {
        title: '待审帖子',
        value: 0,
        icon: Document,
        change: '+0',
        changeType: 'up',
        bgColor: 'rgba(64, 158, 255, 0.1)',
        action: 'post'
      },
      {
        title: '总帖子',
        value: 0,
        icon: Document,
        bgColor: 'rgba(64, 158, 255, 0.1)',
        action: 'post'
      },
      {
        title: '总用户',
        value: 0,
        icon: User,
        change: '+0',
        changeType: 'up',
        bgColor: 'rgba(64, 158, 255, 0.1)',
        action: 'user'
      },
      {
        title: '新用户',
        value: 0,
        icon: User,
        change: '+0',
        changeType: 'up',
        bgColor: 'rgba(64, 158, 255, 0.1)',
        action: 'user'
      },
      {
        title: '游戏库',
        value: 0,
        icon: SwitchFilled,
        bgColor: 'rgba(64, 158, 255, 0.1)',
        action: 'game'
      },
      {
        title: '帖子标签',
        value: 0,
        icon: Flag,
        bgColor: 'rgba(64, 158, 255, 0.1)',
        action: 'topicTag'
      },

    ]
  }
  return [
    {
      title: '待审帖子',
      value: metrics_data.value.pendingPosts,
      icon: Document,
      change: `${metrics_data.value.newPostChange >= 0 ? '+' : ''}${metrics_data.value.newPostChange}`,
      changeType: metrics_data.value.newPostChange >= 0 ? 'up' : 'down',
      bgColor: 'rgba(64, 158, 255, 0.1)',
      action: 'post'
    },
    {
      title: '总帖子',
      value: metrics_data.value.totalPosts,
      change: `${metrics_data.value.newPostChange >= 0 ? '+' : ''}${metrics_data.value.newPostChange}`,
      changeType: metrics_data.value.newPostChange >= 0 ? 'up' : 'down',
      icon: Document,
      bgColor: 'rgba(64, 158, 255, 0.1)',
      action: 'post'
    },
    {
      title: '总用户',
      value: metrics_data.value.totalUsers,
      icon: User,
      change: `${metrics_data.value.newUserChange >= 0 ? '+' : ''}${metrics_data.value.newUserChange}`,
      changeType: metrics_data.value.newUserChange >= 0 ? 'up' : 'down',
      bgColor: 'rgba(64, 158, 255, 0.1)',
      action: 'user'
    },
    {
      title: '新用户',
      value: metrics_data.value.newUsers,
      icon: User,
      change: `${metrics_data.value.newUserChange >= 0 ? '+' : ''}${metrics_data.value.newUserChange}`,
      changeType: metrics_data.value.newUserChange >= 0 ? 'up' : 'down',
      bgColor: 'rgba(64, 158, 255, 0.1)',
      action: 'user'
    },
    {
      title: '游戏库',
      value: metrics_data.value.totalGames,
      icon: SwitchFilled,
      bgColor: 'rgba(64, 158, 255, 0.1)',
      action: 'game'
    },
    {
      title: '帖子标签',
      value: metrics_data.value.totalTagsTopic,
      icon: Flag,
      bgColor: 'rgba(64, 158, 255, 0.1)',
      action: 'topicTag'
    },
    {
      title: '用户偏好',
      value: metrics_data.value.totalTagsPreference,
      icon: Star,
      bgColor: 'rgba(64, 158, 255, 0.1)',
      action: 'preferenceTag'
    }
  ]
})





// 处理指标点击
const handleMetricClick = (action: string) => {
  console.log('点击了指标:', action)
  // 这里可以添加路由跳转或其他逻辑
  switch (action) {
    case 'user': {
      router.push('/main/user')
      break
    }
    case 'post': {
      router.push('/main/posts/manage')
      break
    }
    case 'game': {
      router.push('/main/game')
      break
    }
    default:
      break
  }
}



</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.header {
  margin-bottom: 20px;
}

.page-title {
  margin: 10px 0;
  font-size: 24px;
  color: #303133;
}

.metric-row {
  margin-bottom: 20px;
}

.metric-card {
  cursor: pointer;
  transition: transform 0.3s;
  margin-bottom: 15px;
}

.metric-card:hover {
  transform: translateY(-5px);
}

.metric-content {
  display: flex;
  align-items: center;
}

.metric-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.metric-info {
  flex: 1;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.metric-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.metric-change {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.metric-change.up {
  color: #67C23A;
}

.metric-change.down {
  color: #F56C6C;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-card, .todo-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  padding: 10px;
}

.task-card {
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.task-card h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.task-card p {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.quick-actions {
  margin-top: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  cursor: pointer;
}

.action-text {
  margin-top: 8px;
  font-size: 12px;
  color: #606266;
  text-align: center;
}

.badge {
  margin-left: 10px;
}

@media (max-width: 768px) {
  .metric-card {
    margin-bottom: 15px;
  }

  .action-item {
    margin-bottom: 20px;
  }
}
</style>
